<template>
  <div class="background-music">
    <img v-if="flag" src="../assets/music.png" @click="stop" />
    <img v-else src="../assets/pause.png" @click="play" />
    <audio autoplay id="music">
      <source src="../assets/bgm.mp3" type="audio/mp3" /> Your browser does not support the audio element.
    </audio>
  </div>
</template>
<script>
export default {
  data () {
    return {
      flag: true
    }
  },
  methods: {
    stop () {
      let musicDom = document.getElementById('music')
      this.flag = false
      musicDom.pause()
    },
    play () {
      let musicDom = document.getElementById('music')
      this.flag = true
      musicDom.play()
    }
  }
}
</script>

<style lang="scss" scoped>
.background-music {
  position: fixed;
  right: 0.25rem;
  top: 0.25rem;
  text-align: right;
  z-index: 9999;
  img {
    animation: turns 3s linear infinite;
  }
  img:active {
    animation-play-state: paused;
  }
}

@keyframes turns {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

